<template>
	<view>
		<view>
			<view id="poster" style="display: flex;flex-direction: column;">
				<image :src="'../../static/images/'+item[index]+'.png'" mode="widthFix" @load="onImageLoad(0)" />
				<view style="position: relative;">
					<image style="vertical-align: bottom" :src="'../../static/images/'+item[index]+'_.png'"
						mode="widthFix" @load="onImageLoad(1)" />
					<image style="position: absolute;width: 250rpx;height: 250rpx; left: 250rpx" :src="qrImg"
						@load="onImageLoad(2)" />
				</view>
			</view>
			<image style="position: absolute;top: 0;" :src="generateImageUrl" mode="widthFix"> </image>
		</view>
		<view>
			<uni-section :title="tips">
				<template v-slot:right>
					<text style="color: red;" @click="change()">
						换张宣传图
					</text>
				</template>
			</uni-section>

			<view id="tglj">
				<view>
					<uni-title type="h3" title="推广链接(可与推广宣传图搭配使用)"></uni-title>
					<text>将链接复制到浏览器中打开 </text>
					<text id="t2">{{cxUrl}}</text>
					<uni-tag v-if="update" @click="updateIC()" text="刷新" style="margin-left: 5px;" />
				</view>
				<view style="display: flex;justify-content: center;">
					<button type="primary" style="width: 48%;" @click="copyText">复制分享链接</button>
					<button type="primary" style="width: 48%;" @click="saveImg">保存宣传图</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import QRCode from '@/node_modules/qrcode'
	import html2canvas from 'html2canvas'
	import {
		getIC,
		updateIC
	} from '@/api/system/user'

	export default {
		data() {
			return {
				update: false,
				ic: '',
				generateImageUrl: '',
				loadArr: [false, false, false],
				index: 0,
				item: null,
				qrImg: null,
				baseUrl: null,
				cxUrl: null,
				name: '邀请查询',
				tips: '长按图片保存，分享给用户查询得佣金',

				IMGS: {
					captain: ['DL1', 'DL2'],  // 队长海报	
					member: ['DL1', 'DL2'], // 队员海报	
					P1: ['XYZY2', 'XYZY1'], // 信用报告-专业版 
					P2: ['XYPT1'], // 信用报告-普通版
					P3: ['NSXX1'], // 企业纳税信息
					P4: ['HL1'], // 婚恋信息
					P5: ['SFSS1', 'SFSS2'], // 个人司法诉讼
					P6: ['GRBDC1'] // 个人不动产
				},
				PATH: {
					captain: 'register', // 队长
					member: 'register', // 队员	
					P1: 'professional', // 信用报告-专业版 
					P2: 'ordinary', // 信用报告-普通版
					P3: 'company', // 企业纳税信息
					P4: 'marriage', // 婚恋信息
					P5: 'judicial', // 个人司法诉讼
					P6: 'immovables' // 个人不动产
				}
			}
		},
		onLoad(option) {
			const index = option.index ? option.index : 'P1'

			console.log(index)
			this.item = this.IMGS[index]
			this.baseUrl = window.location.origin + '/pages/' + this.PATH[index] + '?'
			if (index == 'captain' || index == 'member') {
				this.name = '邀请代理'
				this.tips = '长按图片保存，注册发展代理赚提成'
				getIC(index == 'captain' ? 3 : 4).then(res => {
					this.cxUrl = this.baseUrl + 'ic=' + res.msg
					this.ic = res.msg
					this.update = true
					QRCode.toDataURL(this.cxUrl, (err, qrCodeData) => {
						if (err) console.error(err)
						this.qrImg = qrCodeData
					})
				})
			} else {
				this.cxUrl = this.baseUrl + 'ui=' + this.$store.state.user.userid
				QRCode.toDataURL(this.cxUrl, (err, qrCodeData) => {
					if (err) console.error(err)
					this.qrImg = qrCodeData
				})
			}
			uni.setNavigationBarTitle({
				title: this.name
			})
		},
		methods: {
			updateIC() {
				let this_ = this
				uni.showModal({
					title: '刷新邀请码',
					content: '刷新后之前的邀请链接会失效，请谨慎！',
					cancelText: '取消',
					confirmText: '确定刷新',
					success: function(res) {
						console.log(this_.ic)
						if (res.confirm) {
							updateIC(this_.ic).then(res => {
								this_.ic = res.msg
								this_.cxUrl = this_.baseUrl + 'ic=' + res.msg
								QRCode.toDataURL(this_.cxUrl, (err, qrCodeData) => {
									if (err) console.error(err)
									this_.qrImg = qrCodeData
								})
							});
						}
					}
				})	
			},
			onImageLoad(index) {
				this.loadArr[index] = true
				if (this.loadArr.some(item => item === false)) {
					return
				} else {
					this.generateImg()
				}
			},
			generateImg() {
				this.$modal.loading('获取中...')
				let that = this
				setTimeout(() => {
					html2canvas(document.querySelector("#poster")).then(function(canvas) {
						// console.log(canvas, "canvas")
						const imgData = canvas.toDataURL("image/png")
						that.generateImageUrl = imgData
					})
					that.$modal.closeLoading()
				}, 50)
			},
			change() {
				this.index = this.item[++this.index] == undefined ? 0 : this.index
				if (this.item.length == 1) {
					this.$modal.msg('目前仅一张供选择')
				}
			},
			saveImg() {
				if (!this.generateImageUrl) {
					uni.showToast({
						title: '图片尚未生成',
						icon: 'none'
					})
					return
				}
				var link = document.createElement("a");
				link.href = this.generateImageUrl
				link.download = this.name + (this.index + 1) + '.png'
				link.click()
			},
			copyText() {
				this.$copyText(this.cxUrl).then((e) => {
					this.$modal.msgSuccess('已复制快分享吧！')
				}, (e) => {
					alert('Can not copy')
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	image {
		width: 100%;
	}

	#tglj {
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 16rpx;
		background-color: #fff;

		#t2 {
			line-height: 80rpx;
			font-weight: bold;
		}
	}
</style>